<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper UPS demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="./css/swiper1.min.css">
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/ups1.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
  <div id="ups-banner" class="ups-banner">
    <div class="swiper-container1">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="img-fix" id="img-fix">
            <div class="img-inner">
              <img src="https://www.dior.cn/couture/var/dior/storage/images/horizon/block-cover-cover_news/block-cover-item-cdc-femme-handbags/24524022-2-chi-CN/cdc-femme-handbags9_1440_1200.jpg"
                class="img"></div>
          </div>
          <div class="text"><a>
              <div class="top">女士精品</div>
              <div class="middle">缪斯香水</div>
              <div class="under">
                <p class="p-u">
                  <span class="sp-u"><img src="./img/购物车白.png" alt=""></span>
                  <span class="sp-p">立即选购</span>
                </p>
              </div>
            </a></div>
        </div>
        <div class="swiper-slide">
          <div class="img-fix" id="img-fix">
            <div class="img-inner"><img
                src="https://www.dior.cn/couture/var/dior/storage/images/content/view/full/115180/23701418-5-chi-CN/cdc-femme-520-i-love-paris_1440_1200.jpg"
                class="img"></div>
          </div>
          <div class="text"><a>
              <div class="top">女士精品</div>
              <div class="middle">二零二一秋季成衣系列</div>
              <div class="under">
                <p class="p-u"><span class="sp-u"><img src="./img/购物车白.png" alt=""></span><span class="sp-p">立即选购</span></p>
              </div>
            </a></div>
        </div>
        <div class="swiper-slide">
          <div class="img-fix" id="img-fix">
            <div class="img-inner"><img
                src="https://www.dior.cn/couture/var/dior/storage/images/horizon/block-cover-cover_news/block-cover-item-pcd-cn-520/24444080-1-chi-CN/pcd-cn-520_1440_1200.jpg"
                class="img"></div>
          </div>
          <div class="text"><a>
              <div class="top">男士精品</div>
              <div class="middle">迪奥520女士甄礼为她挚献恒久爱意</div>
              <div class="under">
                <p class="p-u"><span class="sp-u"><img src="./img/购物车白.png" alt=""></span><span class="sp-p">立即选购</span></p>
              </div>
            </a></div>
        </div>
        <div class="swiper-slide">
          <div class="img-fix" id="img-fix">
            <div class="img-inner"><img
                src="https://www.dior.cn/couture/var/dior/storage/images/horizon/block-cover-cover_news/block-cover-item-cdc-homme-fall-2021-collection/24372180-4-chi-CN/cdc-homme-fall-2021-collection_1440_1200.jpg"
                class="img"></div>
          </div>
          <div class="text"><a>
              <div class="top">女士精品</div>
              <div class="middle">烈焰蓝金唇膏</div>
              <div class="under">
                <p class="p-u"><span class="sp-u"><img src="./img/购物车白.png" alt=""></span><span class="sp-p">立即选购</span></p>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="bottom-nav" id="bottom-nav">
        <div class="swiper-pagination" id="swiper-pagination"></div>
        <div class="ups-icon-videoplay" id="ups-icon-videoplay"></div>
      </div>
    </div>
    <div class="swiper-button-next" id="swiper-button-next"><span class="iconfont icon-angle-right"></span></div>
    <div class="swiper-button-prev" id="swiper-button-prev"><span class="iconfont icon-angle-left"></span></div>
  </div>
  <script src="./javascripts/swiper1.min.js"></script>
  <script src="./javascripts/ups1.js"></script>


</body>

</html>